<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>三层罐-开孔 & 水压检验表（保存+PDF）</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    /* ===== 基础样式 ===== */
    :root{--blue:#2f7bff;--green:#00b34f;--grey:#f4f6fa;--radius:8px;}
    *{box-sizing:border-box;margin:0;padding:0;font-family:"Microsoft YaHei",Arial,sans-serif}
    body{background:linear-gradient(135deg,#e0eafc,#cfdef3);padding:20px;}
    .card{max-width:1000px;margin:auto;background:#fff;border-radius:var(--radius);box-shadow:0 4px 18px rgba(0,0,0,.08);overflow:hidden;}
    .hdr-info{display:flex;justify-content:space-between;align-items:center;background:var(--grey);padding:10px 30px;font-size:15px;font-weight:600;}
    .hdr-info span{flex:1;text-align:center;}
    .header{background:var(--blue);color:#fff;text-align:center;padding:18px;font-size:22px;letter-spacing:1px;}
    .section{padding:20px 30px 30px}
    .section-title{display:flex;align-items:center;margin-bottom:12px;font-size:18px;font-weight:600;}
    .section-title .badge{width:6px;height:20px;border-radius:3px;margin-right:10px;}
    .open-hole .badge{background:var(--blue);}.hydro .badge{background:var(--green);}
    table{width:100%;border-collapse:collapse;font-size:14px;}
    th,td{border:1px solid #d0d7e4;padding:8px 4px;text-align:center}
    th{background:var(--grey);color:#333;}
    .open-hole th{background:#e7f0ff;}.hydro th{background:#e6f9ef;}
    .check-group{display:flex;gap:12px;justify-content:center;align-items:center;}
    .check-group input[type=checkbox]{width:16px;height:16px;vertical-align:middle;margin:0;}
    .check-group label{font-size:14px;vertical-align:middle;user-select:none;}
    .note{min-height:30px;background:#fafbfc;}
    .sign{min-height:30px;}
    .btn-area{text-align:center;padding:22px 0 30px;display:flex;gap:12px;justify-content:center;}
    .btn{
        display:inline-block;background:var(--blue);color:#fff;
        padding:10px 24px;border:none;border-radius:30px;font-size:15px;cursor:pointer;
        box-shadow:0 4px 12px rgba(47,123,255,.3);transition:.3s;
    }
    .btn:hover{background:#1b68ff;box-shadow:0 6px 16px rgba(47,123,255,.4);}
    /* 历史编号下拉 */
    #historySel{width:140px;margin-left:8px;font-size:14px;}

    /* ===== 打印样式 ===== */
    @media print{
        body{background:#fff}
        .btn-area,#historySel{display:none}
        .card{box-shadow:none;border:1px solid #ccc}
        .hdr-info{background:#fff;border-bottom:1px solid #000}
        /* 强制 A4 竖版 */
        @page{size:A4 portrait;margin:10mm}
    }
</style>
</head>
<body>

<div class="card">
    <!-- 表头信息 -->
    <div class="header">三层罐-封头筒体开孔 & 水压试验检验表
	            <select id="historySel" title="历史产品">
                <option value="">- 选择历史 -</option>
            </select>
	</div>
    <div class="hdr-info">
        <span>项目编号：
            <input type="text" id="projNo" placeholder="填写项目编号" style="width:120px" autocomplete="off">
        </span>
        <span>产品名称：<input type="text" id="prodName" placeholder="填写产品名称" style="width:120px"></span>
        <span>规格型号：<input type="text" id="model" placeholder="填写规格型号" style="width:120px"></span>
    </div>

    <!-- ====== 开孔检查 ====== -->
    <div class="section open-hole">
        <div class="section-title"><div class="badge"></div>一、封头 & 筒体开孔检查</div>
        <table>
            <thead><tr>
                <th style="width:42px">序号</th><th>检验项目</th>
                <th>检验内容 / 判定标准</th><th style="width:70px">检验方式</th>
                <th style="width:130px">检验结果</th><th style="width:140px">建议 / 备注</th>
            </tr></thead>
            <tbody>
                <tr><td>1</td><td>规格核对</td><td>实物标识与图纸一致</td><td>核对图纸</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="spec_ok"><label for="spec_ok">合格</label>
                        <input type="checkbox" id="spec_ng"><label for="spec_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
                <tr><td>2</td><td>开孔数量</td><td>与图纸一致，无缺失、无多余</td><td>目视</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="oh1_ok"><label for="oh1_ok">合格</label>
                        <input type="checkbox" id="oh1_ng"><label for="oh1_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
                <tr><td>3</td><td>开孔位置</td><td>角度、方位、尺寸与图纸一致</td><td>尺量</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="oh2_ok"><label for="oh2_ok">合格</label>
                        <input type="checkbox" id="oh2_ng"><label for="oh2_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
                <tr><td>4</td><td>开孔尺寸</td><td>直径、椭圆度在公差范围内</td><td>卡尺</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="oh3_ok"><label for="oh3_ok">合格</label>
                        <input type="checkbox" id="oh3_ng"><label for="oh3_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
                <tr><td>5</td><td>表面处理</td><td>开孔部位抛光，粗糙度满足图纸，无毛刺快口</td><td>目视 / 粗糙度仪</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="oh4_ok"><label for="oh4_ok">合格</label>
                        <input type="checkbox" id="oh4_ng"><label for="oh4_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
                <tr><td>6</td><td>内部清洁</td><td>无飞溅、无垃圾，内部干净</td><td>目视</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="oh5_ok"><label for="oh5_ok">合格</label>
                        <input type="checkbox" id="oh5_ng"><label for="oh5_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
                <tr><td>7</td><td>导流板避让（夹套）</td><td>开孔处导流条预留30 mm缺口，防止堵塞</td><td>尺量</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="oh6_ok"><label for="oh6_ok">合格</label>
                        <input type="checkbox" id="oh6_ng"><label for="oh6_ng">不合格</label>
                    </div></td><td>仅夹套筒体</td></tr>
                <tr><td>8</td><td>PT检测（管口）</td><td>NB/T47013.5-2015 Ⅰ级合格</td><td>报告</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="oh7_ok"><label for="oh7_ok">合格</label>
                        <input type="checkbox" id="oh7_ng"><label for="oh7_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
            </tbody>
        </table>
    </div>

    <!-- ====== 水压检查 ====== -->
    <div class="section hydro">
        <div class="section-title"><div class="badge"></div>二、水压试验检查</div>
        <table>
            <thead><tr>
                <th style="width:42px">序号</th><th>检验项目</th>
                <th>检验内容 / 判定标准</th><th style="width:70px">检验方式</th>
                <th style="width:130px">检验结果</th><th style="width:140px">建议 / 备注</th>
            </tr></thead>
            <tbody>
                <tr><td>9</td><td>材质确认</td><td>核对产品材质与图纸一致</td><td>目视 / 资料核对</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="mat_ok"><label for="mat_ok">合格</label>
                        <input type="checkbox" id="mat_ng"><label for="mat_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
                <tr><td>10</td><td>检测前置条件</td><td>RT、PT全部完成且报告齐全</td><td>查报告</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="hy1_ok"><label for="hy1_ok">合格</label>
                        <input type="checkbox" id="hy1_ng"><label for="hy1_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
                <tr><td>11</td><td>内部清洁</td><td>抛光完成，无焊渣、无垃圾</td><td>目视</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="hy2_ok"><label for="hy2_ok">合格</label>
                        <input type="checkbox" id="hy2_ng"><label for="hy2_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
                <tr><td>12</td><td>图纸核对</td><td>所有部件、尺寸、位置与图纸一致</td><td>图纸核对</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="hy3_ok"><label for="hy3_ok">合格</label>
                        <input type="checkbox" id="hy3_ng"><label for="hy3_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
                <tr><td>13</td><td>工装与部件</td><td>工装、紧固件、罐底阀等安装到位，品牌正确</td><td>目视 / 核对</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="hy4_ok"><label for="hy4_ok">合格</label>
                        <input type="checkbox" id="hy4_ng"><label for="hy4_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
                <tr><td>14</td><td>压力表校验</td><td>压力表正常且在有效校验周期内</td><td>查表</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="hy5_ok"><label for="hy5_ok">合格</label>
                        <input type="checkbox" id="hy5_ng"><label for="hy5_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
                <tr><td>15</td><td>水压试验过程</td><td>升压、保压、卸压无渗漏、无变形、无异常声响</td><td>目视 / 监听</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="hy6_ok"><label for="hy6_ok">合格</label>
                        <input type="checkbox" id="hy6_ng"><label for="hy6_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
                <tr><td>16</td><td>试验后处理</td><td>排水、干燥，内部无残留水、无锈蚀</td><td>目视</td>
                    <td><div class="check-group">
                        <input type="checkbox" id="hy7_ok"><label for="hy7_ok">合格</label>
                        <input type="checkbox" id="hy7_ng"><label for="hy7_ng">不合格</label>
                    </div></td><td class="note"></td></tr>
            </tbody>
        </table>
    </div>

    <!-- 签名区 -->
    <div class="section">
        <table>
            <tr><td style="width:18%;font-weight:600">检验员签名 / 日期</td><td class="sign"><input type="text" id="sign1" style="width:90%"></td></tr>
            <tr><td style="font-weight:600">复检意见（如有）</td><td class="sign"><input type="text" id="sign2" style="width:90%"></td></tr>
        </table>
    </div>

    <!-- 按钮 -->
    <div class="btn-area">
        <button class="btn" onclick="saveData()">保存记录</button>
        <button class="btn" onclick="printPDF()">生成 PDF</button>
    </div>
</div>

<script>
/* ========= 数据保存与载入 ========= */
const fields = ['projNo','prodName','model',
    'spec_ok','spec_ng','oh1_ok','oh1_ng','oh2_ok','oh2_ng','oh3_ok','oh3_ng',
    'oh4_ok','oh4_ng','oh5_ok','oh5_ng','oh6_ok','oh6_ng','oh7_ok','oh7_ng',
    'mat_ok','mat_ng','hy1_ok','hy1_ng','hy2_ok','hy2_ng','hy3_ok','hy3_ng',
    'hy4_ok','hy4_ng','hy5_ok','hy5_ng','hy6_ok','hy6_ng','hy7_ok','hy7_ng',
    'sign1','sign2'];

function saveData(){
    const no = document.getElementById('projNo').value.trim();
    if(!no){alert('请先填写项目编号！');return;}
    const data = {};
    fields.forEach(f=>data[f]=document.getElementById(f).checked??document.getElementById(f).value);
    localStorage.setItem('check_'+no,JSON.stringify(data));
    updateHistoryList();
    alert('已保存');
}
function loadData(no){
    const d=JSON.parse(localStorage.getItem('check_'+no)||'{}');
    fields.forEach(f=>{
        const el=document.getElementById(f);
        if(el.type==='checkbox') el.checked=d[f]||false;
        else el.value=d[f]||'';
    });
}
function updateHistoryList(){
    const sel=document.getElementById('historySel');
    sel.innerHTML='<option value="">- 选择历史 -</option>';
    for(let i=0;i<localStorage.length;i++){
        const k=localStorage.key(i);
        if(k.startsWith('check_')){
            const no=k.replace('check_','');
            sel.innerHTML+=`<option value="${no}">${no}</option>`;
        }
    }
}
document.getElementById('historySel').addEventListener('change',e=>{
    if(e.target.value) loadData(e.target.value);
});
/* 自动保存 */
/* 跨表自动带入 */
['projNo','prodName','model','sign1','sign2'].forEach(id=>{
    document.getElementById(id).addEventListener('input',()=>saveData());
});

/* ========= PDF 打印 ========= */
function printPDF(){
    window.print();
}

/* 初始化 */
window.onload=()=>{
    updateHistoryList();
    // 默认载入最近一条
    const last=localStorage.getItem('lastProj');
    if(last) {loadData(last);document.getElementById('projNo').value=last;}
};
document.getElementById('projNo').addEventListener('change',e=>{
    localStorage.setItem('lastProj',e.target.value);
});
</script>
</body>
</html>
